<template>
  <div class="container">
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery">
        <el-form-item label="名称"><el-input v-model="listQuery.keyword" placeholder="" clearable></el-input></el-form-item>
        <!-- <el-form-item label="状态">
          <el-select v-model="listQuery.rec_flag" filterable="">
            <el-option :key="-1" label="全部" value="null"></el-option>
            <el-option v-for="(item ,index) in status" :key="index" :label="item.title" :value="item.code"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="回放时间">
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="search()">搜索</el-button>
          <el-button type="primary" size="small" @click="clear()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="loading"
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="group_title"
      label="设备组/设备名"
      align="center">
      <template slot-scope="{row}"><span>{{ row.group_title }}/{{ row.device_title }}</span></template>
    </el-table-column>
    <el-table-column
      prop="type_title"
      label="类型"
      align="center">
    </el-table-column>
    <el-table-column
      prop="file_name"
      label="上传文件名"
      align="center">
    </el-table-column>
    <!-- <el-table-column
      prop="sort_num"
      align="center"
      label="排序号"
      width="80">
    </el-table-column> -->
    <el-table-column
      align="center"
      label="操作"
      width="180">
      <template slot-scope="{row}">
        <el-button type="primary" plain size="small" @click="viewVideo(row)">查看</el-button>
        <el-button type="primary" size="small" @click="downVideo(row)">下载</el-button>
      </template>
    </el-table-column>
  </el-table>
  <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size"
    @pagination="getList" />

  <!-- 添加、编辑 -->
  <el-dialog  :title="currentRow.group_title+'/'+currentRow.device_title" :visible.sync='dialogVisible.show' :close-on-click-modal=false width="750px">
    <div class="content">
      <template v-if="dialogVisible.show">
        <div style="padding-bottom:5px" >
          <JessibucaDemo :show_audio="true" :control_Btn="false" :screen_width="750" :stop_video="false" :screen_height="445" :videoUrl="currentRow.file_url" :deviceId="currentRow.device_id"/>
        </div>
      </template>
      <!-- <span slot="footer" class="dialog-footer flex-row  align-center justify-center" >
        <el-button type="primary" @click="dialogVisible.show = false">确定</el-button>
        </span> -->
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { playback_list, group_save, group_delete } from '@/api/server'
import Pagination from '@/components/Pagination/index.vue'
import JessibucaDemo from '@/components/JessibucaDemo.vue'
import store from '@/store'

  export default {
    components:{
        Pagination,JessibucaDemo
    },
    data() {
      return {
        tableData: [],
        value1:'',
        listQuery:{
          page:1,
          page_size:10,
          keyword:'',
          start:'',
          end:'',
          device_id:this.$route.query.id || ''
        },
        status:[{title:'启用',code:10},{title:'禁用',code:20}],
        loading:false,
        total:0,
        roleList:[],
        dialogVisible:{
          show:false,
          dia_title:'添加设备组',
          file_name:'',
          group_title:''
        },
        currentRow:{},
        controlBtn:{
          add:false,
          del:false,
          edit:false,
          auth:false
        }
        // rules:{
        //   group_title:[{required:true,message:'类型不能为空',trigger: 'blur'}],
        //   file_name:[{required:true,message:'名称不能为空',trigger: 'blur'}]
        // }
      }
    },
    methods:{
      dialogClose(){
        // this.$refs.dialogVisible.resetFields()
      },
      viewVideo(row){
        this.dialogVisible.show=true
        this.currentRow = row
      },
      downVideo(row){
        window.open(row.file_url)
      },
      search(){
        this.listQuery.page = 1
        this.getList()
      },
      clear(){
        this.listQuery.page = 1
        this.listQuery.keyword = ''
        this.getList()
      },
      getList(){
        this.loading = true
        console.log(this.listQuery)
        playback_list(this.listQuery).then(res=>{
          this.loading = false
          this.tableData = res.data
          this.total = res.total
        })
      }
    },
    mounted(){
      this.getList()
      const mainRoutes = store.getters.mainRoutes
      if(mainRoutes.playback && mainRoutes.playback.length>0){
        mainRoutes.playback.forEach(e=>{
          if(e == '增加'){
            this.controlBtn.add = true
          }
          if(e == '删除'){
            this.controlBtn.del = true
          }
          if(e == '修改'){
            this.controlBtn.edit = true
          }
          if(e == '权限'){
            this.controlBtn.auth = true
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialogVisible {
    ::v-deep.el-form-item__label{
      padding: 0 !important;
    }
  }
</style>
